<template>
    <el-alert
        title='work center 是查看工作情况的唯一途径，欢迎接入。'
        type='success'
        :closable='false'
    />
    <el-card class='box-card layout-login'>
        <div
            class='login-form'
            @keyup='enterSubmit'
        >
            <el-header style='text-align:center'>
                <el-image
                    src='/@/assets/logo.png'
                    style='width: 50px; height: 50px'
                />
            </el-header>
            <el-form
                ref='ruleForm'
                label-position='right'
                label-width='80px'
                :model='form'
                :rules='rules'
            >
                <el-form-item
                    label='用户名'
                    prop='name'
                >
                    <el-input
                        v-model='form.name'
                        placeholder='请输入用户名'
                    />
                </el-form-item>
                <el-form-item
                    label='密码'
                    prop='pwd'
                >
                    <el-input
                        v-model='form.pwd'
                        type='password'
                        autocomplete='off'
                        placeholder='请输入密码'
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type='primary'
                        @click='onSubmit'
                    >
                        登录
                    </el-button>
                    <el-button @click='resetFields(ruleForm)'>
                        重置
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <p class='leading-5'>
                        账号: admin 密码: admin
                    </p>
                    <p class='leading-5'>
                        账号: dev 密码: dev
                    </p>
                    <p class='leading-5'>
                        账号: test 密码: test
                    </p>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { store } from '/@/store/index'
import { ElNotification } from 'element-plus'
import { validate, resetFields } from '/@/utils/formExtend'

const formRender = () => {
    let form = reactive({
        name: '',
        pwd: ''
    })
    const ruleForm = ref(null)
    const enterSubmit = (e:KeyboardEvent) => {
        if(e.key === 'Enter') {
            onSubmit()
        }
    }
    const onSubmit = async() => {
        let { name, pwd } = form
        if(!await validate(ruleForm)) return
        await store.dispatch('layout/login', { username: name, password: pwd })
        ElNotification({
            title: '欢迎',
            message: '欢迎回来',
            type: 'success'
        })
    }
    const rules = reactive({
        name: [
            { validator: (rule: any, value: any, callback: (arg0?: Error|undefined) => void) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'))
                }
                callback()
            }, trigger: 'blur'
            }
        ],
        pwd: [
            { validator: (rule: any, value: any, callback: (arg0?: Error|undefined) => void) => {
                if (!value) {
                    return callback(new Error('密码不能为空'))
                }
                callback()
            }, trigger: 'blur'
            }
        ]
    })
    return {
        form,
        onSubmit,
        enterSubmit,
        rules,
        resetFields,
        ruleForm
    }
}
export default defineComponent({
    name: 'Login',
    setup() {

        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            ...formRender()
        }
    }
})
</script>

<style scoped>
.login-header{
    font-weight: 400;
    color: #1f2f3d;
}
.login-form {
    margin: 0 30px;

}
.layout-login {
    padding-top: 100px;
    width: 500px;
    margin: 0 auto;

}
body  {
  background-color: #f0f2f5;
}
</style>
